<!--课程统计---课程搜索关键字-->
<template>
  <div id="kcssgjz">
    <div style="height: 50px;background-color: #E9EEF3;line-height: 50px;display: flex;justify-content: space-between;border-bottom: 1px solid #31C3A6"  >
      <div>课程搜索关键字</div>
      <div>
        <el-button class="dcsj" @click="exportData" icon="el-icon-download">导出数据</el-button>
        <el-button style="margin-right: -10px" @click="zj7t">最近7 天</el-button>
        <el-button style="margin-right: -10px" @click="zj30t">最近30天</el-button>
        <el-button @click="zj90t">最近90天</el-button>
        <el-button @click="qbsj">全部数据</el-button>
      </div>
    </div>
<!--    模糊查询-->
    <div style="display: flex;margin-top: 30px;justify-content: space-between;">
      <div style="line-height: 40px;margin-left: 300px;">筛选条件：</div>
      <div style="margin-left: -500px">
        <div class="block">
          <el-date-picker
              v-model="value1"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change ="souSuo"
          >
          </el-date-picker>
        </div>
      </div>
      <div>
        <el-button type="primary" >搜索</el-button>
      </div>

    </div>
    <div style="display: flex;margin-top: 30px">
      <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%">
        <el-table-column prop="courseId" label="课程ID" width="200"></el-table-column>
        <el-table-column prop="courseName" label="课程名称" width="300"></el-table-column>
        <el-table-column prop="course_primary" label="搜索关键字" width="250"></el-table-column>
        <el-table-column prop="courseIntro" label="课程简介" width="250"></el-table-column>
        <el-table-column prop="courseInfo" label="课程详情" width="250"></el-table-column>
        <el-table-column prop="courseTime" label="课程时长" width="250"></el-table-column>
      </el-table>
    </div>
<!--    分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
    </el-pagination>
  </div>
</template>
<script>
  // import request from "@/utils/request";
  export default {
    data() {
      return {
        value1:[],
        tableData: [],
        //分页
        pageSize:10,//每页的数据
        currentPage:1,
        currentIndex:""
      };
    },
    methods:{
      async qbsj(){
        this.$http.get("/CoursePrimary/getCoursePrimary").then(res => {
          // console.log(res.data);
          this.tableData = res.data;
          this.total = res.data.total;
        });
      },
      async zj7t(){
        this.$http.get("/CoursePrimary/getCoursePrimaryZj7t").then(res => {
          // console.log(res.data)
          this.tableData = res.data;
          this.total = res.data.total;
        })
      },
      async zj30t(){
        this.$http.get("/CoursePrimary/getCoursePrimaryZj30t").then(res => {
          // console.log(res.data)
          this.tableData = res.data;
          this.total = res.data.total;
        })
      },
      async zj90t(){
        this.$http.get("/CoursePrimary/getSCoursePrimaryZj90t").then(res => {
          // console.log(res.data)
          this.tableData = res.data;
          this.total = res.data.total;
        })
      },
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      // 模糊查询
     async souSuo(){
        // console.log(this.value1);
       var params = new URLSearchParams();
       params.append("kaiShiLike",this.value1[0]);
       params.append("jieShuLike",this.value1[1]);
       const Likes =  await this.$http.post("/CoursePrimary/getCoursePrimaryLike",params).then(res => {
          // console.log(res.data)
         console.log(res.data);
         this.tableData = res.data;
        })
      },
      //导出数据
      async exportData(){
        await this.$http({
          method:"POST",
          url:"/CoursePrimary/export",
          params: {},
          responseType:'blob'
        })
        .then(res =>{
         let blob = new Blob([res.data],{type:"application/vnd.ms-excel"}); // 将服务端返回的文件流（二进制）excel文件转化为blob
          let fileName = "课程搜索关键字.xls";
          if (window.navigator && window.navigator.msSaveOrOpenBlob){
            //IE
            window.navigator.msSaveOrOpenBlob(blob,fileName);
          }else {
            let objectUrl = (window.URL || window.webkitURL).createObjectURL(blob);
            let downFile = document.createElement("a");
            downFile.style.display = "none";
            downFile.href = objectUrl;
            downFile.download = fileName;//下载后文件名
            document.body.appendChild(downFile);
            downFile.click();
            document.body.removeChild(downFile);//下载完成移除元素
            window.URL.revokeObjectURL(objectUrl);//只要映射存在，Blob就不能进行垃圾回收,因此一旦不再需要引用，就必须小心撤销URL，释放掉blob对象。
          }
        })
        .catch(err =>{
          console.log(err)
        })
      },
    },
    mounted() {
      this.qbsj();
      this.zj7t();
      this.zj30t();
      this.zj90t();
      this.souSuo();
    }
  };
</script>
<style>
  #kcssgjz{
    width: 1515px;
  }
  .el-main {
    background-color: #E9EEF3;
  }

</style>
